<template>
  <!-- 外部容器 -->
  <div class="outer-container">
    <!-- 可点击文字链接 (Element 风格) -->
    <el-link @click="goToHome" class="home-link">股票行家首页</el-link>

    <!-- 图片容器 -->
    <div class="image-container">
      <img src="/images/logo3.png" alt="Logo" class="logo1" />
    </div>

    <!-- 注册容器 -->
    <div class="register-container">
      <el-form :model="form" label-width="100px" class="register-form">
        <el-form-item label="手机号" :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }]">
          <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>

        <el-form-item label="短信验证码" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-input v-model="form.smsCode" placeholder="请输入验证码"></el-input>
            </el-col>
            <el-col :span="8">
              <el-button @click="sendSmsCode" style="width: 100%;" size="small">获取验证码</el-button>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="密码" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <el-input v-model="form.password" placeholder="请输入密码" show-password></el-input>
        </el-form-item>

        <el-form-item label="确认密码" :rules="[{ required: true, message: '请确认密码', trigger: 'blur' }]">
          <el-input v-model="form.confirmPassword" placeholder="请确认密码" show-password></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit" style="width: 100%;">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'; // 导入router模块
import { ElMessage } from 'element-plus';
import {getConfirmCodeService, userRegisterService} from "@/api/request.js";

    const router = useRouter(); // 获取router实例

    const form = ref({
      phone: '',
      smsCode: '',
      password: '',
      confirmPassword: ''
    });

    const sendSmsCode = async () => {
      let response = await getConfirmCodeService(form.value.phone);
      if(response!=='短信验证码发送成功！'){
        ElMessage.error(response);
        return;
      }
      ElMessage.success('验证码已发送！');
    };

    const onSubmit = async () => {
      if(form.value.phone === '' || form.value.smsCode === '' || form.value.password === '' || form.value.confirmPassword === '') {
        ElMessage.error('请填写完整信息！');
        return;
      }
      if (form.value.password !== form.value.confirmPassword) {
        ElMessage.error('两次输入的密码不一致！');
        return;
      }
      let user = {phone: form.value.phone, password: form.value.password}
      let response = await userRegisterService(user, form.value.smsCode);
      if(response!==null){
        ElMessage.error(response.msg);
        return;
      }
      // console.log(response);
      ElMessage.success('注册成功！');
    };

    // 跳转到首页的方法
    const goToHome = () => {
      router.push({ path: '/' }); // 跳转到首页
    };

</script>

<style scoped>
/* 外部容器，用于居中整体布局，并设置灰色底色 */
.outer-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f7f7f7; /* 灰色底色 */
  padding: 30px; /* 容器边距 */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 650px; /* 扩大容器宽度 */
  overflow: hidden; /* 确保滚动条不会干扰 */
}

/* 可点击的文字链接样式 */
.home-link {
  position: absolute; /* 绝对定位以移动到右上角 */
  top: 15px; /* 距离上边距 */
  right: 20px; /* 距离右边距 */
  font-size: 14px; /* 文本大小 */
  color: #409EFF; /* Element Plus 标准链接颜色 */
}

/* 注册容器样式 */
.register-container {
  padding: 40px 60px; /* 扩大内边距，留出两端空隙 */
  border-radius: 8px;
  background-color: #fff;
}

/* 图片样式 */
.logo1 {
  width: 300px;
  height: 90px;
  margin-bottom: 20px; /* 增大底部间距以适应布局变化 */
}

/* 统一行间距 */
.el-row,
.el-form-item {
  margin-bottom: 20px;
}

/* 保持列布局的一致性 */
.el-col {
  display: flex;
  align-items: center;
}

/* 清理表单内容的最大宽度 */
.register-form {
  max-width: 100%;
}
</style>
